<template>
	<div>
		<el-tabs type="card" v-model="activeName" @tab-click="handleClick">
			<el-tab-pane class="main-order" name="allOrder">
				<span slot="label"><i class="el-icon-date"></i> 全部订单</span>
				<div class="order-seach">
					<div class="btns">
						<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;"
							prefix-icon="el-icon-search" clearable />
						<el-button type="primary" icon="el-icon-search" @click="handleSearch"></el-button>
					</div>
				</div>
				<div class="order-table">
					<el-table :data="orderDate" style="width: 100%">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="订单号" prop="orderNumber" width="200">
						</el-table-column>
						<el-table-column label="用户昵称" prop="username" width="150">
						</el-table-column>
						<el-table-column label="商品信息" width="400">
							<template slot-scope="scope">
								<div class="commodityInfo" v-for="(item,index) in scope.row.znOrderDetailsList">
									<el-image :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"></el-image>
									<div class="information">
										<div style="width: 100px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;">
											{{item.farmName}}&nbsp;
										</div>
										<div>&nbsp;{{item.specificationBean.znSpecTitle}}&nbsp;</div>
										<div>&nbsp;￥{{item.specificationBean.znSpecPrice}}&nbsp;</div>
										<div>&nbsp;x&nbsp;{{item.count}}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="实际支付" prop="totalPrice" width="120">
						</el-table-column>
						<el-table-column label="支付状态" prop="status" width="100">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 0" type="danger">待支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 2" type="danger">申请退款</el-tag>
								<el-tag v-if="scope.row.payStatus === 3" type="success">已退款</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="订单状态" prop="status" width="260">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.deliverStatus === 0" type="danger">待发货</el-tag>
								<el-tag v-if="scope.row.deliverStatus === 1" type="success">已发货</el-tag>
								<el-tag v-if="scope.row.takeStatus === 0" type="danger">待收货</el-tag>
								<el-tag v-if="scope.row.takeStatus === 1" type="success">已收货</el-tag>
								<el-tag v-if="scope.row.evaluateStatus === 0" type="danger">待评价</el-tag>
								<el-tag v-if="scope.row.evaluateStatus === 1" type="success">已评价</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="200">
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="180">
							<template slot-scope="scope">
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="order-page">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane class="main-order" name="allNonPay">
				<span slot="label"><i class="el-icon-date"></i> 未支付</span>
				<div class="order-seach">
					<div class="btns">
						<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;"
							prefix-icon="el-icon-search" clearable />
						<el-button type="primary" icon="el-icon-search" @click="selectNonPaystaAll"></el-button>
					</div>
				</div>
				<div class="order-table">
					<el-table :data="orderDate" style="width: 100%">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="订单号" prop="orderNumber" width="200">
						</el-table-column>
						<el-table-column label="用户昵称" prop="username" width="150">
						</el-table-column>
						<el-table-column label="商品信息" width="400">
							<template slot-scope="scope">
								<div class="commodityInfo" v-for="(item,index) in scope.row.znOrderDetailsList">
									<el-image :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"></el-image>
									<div class="information">
										<div style="width: 100px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;">
											{{item.farmName}}&nbsp;
										</div>
										<div>&nbsp;{{item.specificationBean.znSpecTitle}}&nbsp;</div>
										<div>&nbsp;￥{{item.specificationBean.znSpecPrice}}&nbsp;</div>
										<div>&nbsp;x&nbsp;{{item.count}}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="实际支付" prop="totalPrice" width="120">
						</el-table-column>
						<el-table-column label="支付状态" prop="status" width="100">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 0" type="danger">待支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="订单状态" prop="status" width="260">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 0" type="danger">待支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 2" type="danger">申请退款</el-tag>
								<el-tag v-if="scope.row.payStatus === 3" type="success">已退款</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="200">
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="180">
							<template slot-scope="scope">
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="order-page">
					<el-pagination @current-change="handleCurrentChange1" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane class="main-order" name="allNoRefund">
				<span slot="label"><i class="el-icon-date"></i> 退款申请</span>
				<div class="order-seach">
					<div class="btns">
						<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;"
							prefix-icon="el-icon-search" clearable />
						<el-button type="primary" icon="el-icon-search" @click="selectAllNoRefund"></el-button>
					</div>
				</div>
				<div class="order-table">
					<el-table :data="orderDate" style="width: 100%">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="订单号" prop="orderNumber" width="200">
						</el-table-column>
						<el-table-column label="用户昵称" prop="username" width="150">
						</el-table-column>
						<el-table-column label="商品信息" width="400">
							<template slot-scope="scope">
								<div class="commodityInfo" v-for="(item,index) in scope.row.znOrderDetailsList">
									<el-image :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"></el-image>
									<div class="information">
										<div style="width: 100px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;">
											{{item.farmName}}&nbsp;
										</div>
										<div>&nbsp;{{item.specificationBean.znSpecTitle}}&nbsp;</div>
										<div>&nbsp;￥{{item.specificationBean.znSpecPrice}}&nbsp;</div>
										<div>&nbsp;x&nbsp;{{item.count}}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="实际支付" prop="totalPrice" width="120">
						</el-table-column>
						<el-table-column label="支付状态" prop="status" width="100">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 2" type="success">已支付</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="订单状态" prop="status" width="260">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 2" type="danger">申请退款</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="200">
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="180">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" v-if="scope.row.payStatus === 2"
									@click="handleRefund(scope.row)">退款</el-button>
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="order-page">
					<el-pagination @current-change="handleCurrentChange2" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane class="main-order" name="allDeliver">
				<span slot="label"><i class="el-icon-date"></i> 未发货</span>
				<div class="order-seach">
					<div class="btns">
						<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;"
							prefix-icon="el-icon-search" clearable />
						<el-button type="primary" icon="el-icon-search" @click="selectNonPaystaAll"></el-button>
					</div>
				</div>
				<div class="order-table">
					<el-table :data="orderDate" style="width: 100%">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="订单号" prop="orderNumber" width="200">
						</el-table-column>
						<el-table-column label="用户昵称" prop="username" width="150">
						</el-table-column>
						<el-table-column label="商品信息" width="400">
							<template slot-scope="scope">
								<div class="commodityInfo" v-for="(item,index) in scope.row.znOrderDetailsList">
									<el-image :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"></el-image>
									<div class="information">
										<div style="width: 100px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;">
											{{item.farmName}}&nbsp;
										</div>
										<div>&nbsp;{{item.specificationBean.znSpecTitle}}&nbsp;</div>
										<div>&nbsp;￥{{item.specificationBean.znSpecPrice}}&nbsp;</div>
										<div>&nbsp;x&nbsp;{{item.count}}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="实际支付" prop="totalPrice" width="120">
						</el-table-column>
						<el-table-column label="支付状态" prop="status" width="100">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 0" type="danger">待支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="订单状态" prop="status" width="260">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.deliverStatus === 0" type="danger">待发货</el-tag>
								<el-tag v-if="scope.row.deliverStatus === 1" type="success">已发货</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="200">
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="180">
							<template slot-scope="scope">
								<el-button size="mini" type="primary" v-if="scope.row.deliverStatus === 0"
									@click="clickeDeliverDialog(scope.row)">去发货</el-button>
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="order-page">
					<el-pagination @current-change="handleCurrentChange4" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
			<el-tab-pane class="main-order" name="allTake">
				<span slot="label"><i class="el-icon-date"></i> 待收货</span>
				<div class="order-seach">
					<div class="btns">
						<el-input v-model="input" placeholder="请输入内容" style="margin-right: 10px;"
							prefix-icon="el-icon-search" clearable />
						<el-button type="primary" icon="el-icon-search" @click="selectNonPaystaAll"></el-button>
					</div>
				</div>
				<div class="order-table">
					<el-table :data="orderDate" style="width: 100%">
						<el-table-column type="selection" width="55">
						</el-table-column>
						<el-table-column label="订单号" prop="orderNumber" width="200">
						</el-table-column>
						<el-table-column label="用户昵称" prop="username" width="150">
						</el-table-column>
						<el-table-column label="商品信息" width="400">
							<template slot-scope="scope">
								<div class="commodityInfo" v-for="(item,index) in scope.row.znOrderDetailsList">
									<el-image :src="$store.state.imgShowRoad2 + '/file/' + item.shopPicture"></el-image>
									<div class="information">
										<div style="width: 100px;white-space: nowrap;  overflow: hidden;text-overflow: ellipsis;">
											{{item.farmName}}&nbsp;
										</div>
										<div>&nbsp;{{item.specificationBean.znSpecTitle}}&nbsp;</div>
										<div>&nbsp;￥{{item.specificationBean.znSpecPrice}}&nbsp;</div>
										<div>&nbsp;x&nbsp;{{item.count}}</div>
									</div>
								</div>
							</template>
						</el-table-column>
						<el-table-column label="实际支付" prop="totalPrice" width="120">
						</el-table-column>
						<el-table-column label="支付状态" prop="status" width="100">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.payStatus === 0" type="danger">待支付</el-tag>
								<el-tag v-if="scope.row.payStatus === 1" type="success">已支付</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="订单状态" prop="status" width="260">
							<template slot-scope="scope">
								<el-tag v-if="scope.row.takeStatus === 0" type="danger">待收货</el-tag>
								<el-tag v-if="scope.row.takeStatus === 1" type="success">已收货</el-tag>
							</template>
						</el-table-column>
						<el-table-column label="创建时间" prop="createTime" width="200">
						</el-table-column>
						<el-table-column label="操作" fixed="right" width="180">
							<template slot-scope="scope">
								<el-button size="mini" type="primary"
									@click="clickeReceiveDialog(scope.row)">修改快递</el-button>
								<el-button size="mini" type="danger"
									@click="handleDelete(scope.$index, scope.row)">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</div>
				<div class="order-page">
					<el-pagination @current-change="handleCurrentChange3" :current-page="currentPage"
						:page-size="pageSize" layout="total, prev, pager, next, jumper" :total="total"></el-pagination>
				</div>
			</el-tab-pane>
		</el-tabs>

		<el-dialog title="去发货" :visible.sync="dialogFormVisible" style="width: 40%; margin: 0 auto;"
			:before-close="handleClose">
			<el-form :model="form" ref="form" v-if="Close">
				<el-form-item label="快递公司" :label-width="formLabelWidth">
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in logisticsData" 
						:key="item.id" 
						:label="item.company" 
						:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="快递单号" :label-width="formLabelWidth">
					<el-input v-model="form.courierNumber" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Close">取 消</el-button>
				<el-button type="primary" @click="ToDeliverGoods">确 定</el-button>
			</div>
		</el-dialog>
		
		<el-dialog title="修改快递" :visible.sync="dialogFormVisible1" style="width: 40%; margin: 0 auto;"
			:before-close="handleClose1">
			<el-form :model="form" ref="form" v-if="Close1">
				<el-form-item label="快递公司" :label-width="formLabelWidth">
					<el-select v-model="value" placeholder="请选择">
						<el-option v-for="item in logisticsData" 
						:key="item.id" 
						:label="item.company" 
						:value="item.id">
						</el-option>
					</el-select>
				</el-form-item>
				<el-form-item label="快递单号" :label-width="formLabelWidth">
					<el-input v-model="form.courierNumber" autocomplete="off"></el-input>
				</el-form-item>
			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="Close1">取 消</el-button>
				<el-button type="primary" @click="ToReceiveGoods">确 定</el-button>
			</div>
		</el-dialog>
	</div>

</template>

<script>
	import orderApi from "@/api/order.js"
	import logisticsApi from "@/api/logistics.js"
	export default {
		data() {
			return {
				activeName: 'allOrder',
				total: 0,
				pageSize: 10,
				currentPage: 1,
				input: "",
				orderDate: [],
				logisticsData:[],
				dialogFormVisible: false,
				dialogFormVisible1: false,
				formLabelWidth: '100px',
				form: {
					courierNumber: ""
				},
				value: '',
				row: null
			}
		},
		methods: {
			async queryOrderAll() { //全部
				const res = await orderApi.queryOrderAll("/znOrder/queryOrderAll", {
					input: this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.orderDate = res.data.records;
					this.total = res.data.total;
				}
			},
			async selectNonPaystaAll() { //全部未支付订单
				const res = await orderApi.selectNonPayAll("/znOrder/nonPaymentAll", {
					input: this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.orderDate = res.data.records;
					this.total = res.data.total;
				}
			},
			async selectAllNoRefund() { //全部退款订单
				const res = await orderApi.selectAllNoRefund("/znOrder/AllNoRefund", {
					input: this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.orderDate = res.data.records;
					this.total = res.data.total;
				}
			},
			async selectDeliverAll() { //全部未发货订单
				const res = await orderApi.selectDeliver("/znOrder/unfilledOrders", {
					input: this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.orderDate = res.data.records;
					this.total = res.data.total;
				}
			},
			async selNotReceiveAll() { //全部未收货订单
				const res = await orderApi.selectNotReceive("/znOrder/getNotReceive", {
					input: this.input,
					currentPage: this.currentPage,
					pageSize: this.pageSize
				});
				if (res.code == 200) {
					this.orderDate = res.data.records;
					this.total = res.data.total;
				}
			},
			clickeDeliverDialog(row){//点击打开去发货对话框
				this.dialogFormVisible = true
				this.row = row
			},
			clickeReceiveDialog(row){//点击打开修改快递对话框
				this.dialogFormVisible1 = true
				this.row = row
				this.value = row.znLogisticsBean.company;
				this.form.courierNumber = row.courierNumber;
			},
			async ToDeliverGoods() { //去发货
				let order = {
					orderNumber: this.row.orderNumber,
					courierNumber: this.form.courierNumber,
					logisticsId: this.value
				}
				const res = await orderApi.deliverGoods("/znOrder/deliverGoods", order);
				if (res.code == 200) {
					this.dialogFormVisible = false;
					this.form = {}
					this.value = ''
					this.selectDeliverAll();
					this.$notify({
						title: '操作成功',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: '这是一条错误的提示消息'
					});
				}
			},
			async ToReceiveGoods() { //修改快递
				let order = {
					orderNumber: this.row.orderNumber,
					courierNumber: this.form.courierNumber,
					logisticsId: this.value
				}
				const res = await orderApi.deliverGoods("/znOrder/deliverGoods", order);
				if (res.code == 200) {
					this.dialogFormVisible1 = false;
					this.selNotReceiveAll();
					this.$notify({
						title: '操作成功',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: '这是一条错误的提示消息'
					});
				}
			},
			async queryLogisticsAll() {
				const res = await logisticsApi.queryLogisticsAll("/ZnLogistics/ZnLogisticsAll");
				if (res.code == 200) {
					this.logisticsData = res.data;
				}
			},
			handleClose() {
				this.dialogFormVisible = false;
				this.form = {}
				this.value = ''
			},
			handleClose1() {
				this.dialogFormVisible1 = false;
				
			},
			Close() {
				this.dialogFormVisible = false;
				this.form = {}
				this.value = ''
			},
			Close1() {
				this.dialogFormVisible1 = false;
				
			},
			async handleRefund(row) { //退款
				const res = await orderApi.postRefund("/Alipay/refund?orderNumber=" + row.orderNumber);
				if (res.code == 200) {
					this.selectAllNoRefund();
					this.$notify({
						title: '申请成功',
						message: '请留意资金是否成功退回',
						type: 'success'
					});
				} else {
					this.$notify.error({
						title: '错误',
						message: '这是一条错误的提示消息'
					});
				}
			},
			async handleSearch() { //搜索
				this.queryOrderAll();
			},
			async deleteOrder(row) {
				const res = await orderApi.deleteOrder("/znOrder/deleteOrder/" + row.orderId);
				this.queryOrderAll();
			},
			handleCurrentChange(page) {
				this.currentPage = page;
				this.queryOrderAll();
			},
			handleCurrentChange1(page) {
				this.currentPage = page;
				this.queryOrderAll();
			},
			handleCurrentChange2(page) {
				this.currentPage = page;
				this.selectDeliverAll();
			},
			handleCurrentChange3(page) {
				this.currentPage = page;
				this.selNotReceiveAll();
			},
			handleCurrentChange4(page) {
				this.currentPage = page;
				this.selectAllNoRefund();
			},
			handleDelete(index, row) { //删除点击事件
				this.$confirm('此操作将删除该数据, 是否继续?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					this.deleteOrder(row),
						this.$message({
							type: 'success',
							message: '删除成功!'
						});
				}).catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					});
				});
			},
			handleClick(tab) {
				if (tab.name == "allOrder") {
					this.queryOrderAll();
				}
				if (tab.name == "allNonPay") {
					this.selectNonPaystaAll();
				}
				if (tab.name == "allDeliver") {
					this.selectDeliverAll();
					this.queryLogisticsAll();
				}
				if (tab.name == "allTake") {
					this.selNotReceiveAll();
					this.queryLogisticsAll();
				}
				if (tab.name == "allNoRefund") {
					this.selectAllNoRefund();
				}
			}
		},
		created() {
			this.queryOrderAll();
		}
	}
</script>

<style lang="scss" scoped>
	.main-order {
		height: 100%;
		margin-left: 10px;

		.order-seach {
			height: 7%;

			.btns {
				display: flex;
				width: 25%;
				left: 38%;
				bottom: 0%;
				width: 20%;
			}
		}

		.order-table {
			.commodityInfo {
				display: flex;

				.el-image {
					padding-bottom: 5px;
					width: 30px;
					height: 35px;
					margin: 0px;
					cursor: pointer;
				}

				.information {
					margin-left: 10px;
					display: flex;
					flex-direction: row;
					align-items: center;
					font-size: 12px;
				}
			}
		}

		.order-page {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20px;

		}
	}
</style>